﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/et-lineicons.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/style.css">
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="addo-page"> <a href="#" class="js-addo-nav-toggle addo-nav-toggle"><i></i></a>
	<!-- Sidebar Section -->
	<aside id="addo-aside">
		<!-- Logo -->
		<div id="addo-logo"> <a href="#">武当<span>王也</span></a> </div>
		<!-- Menu -->
		<nav id="addo-main-menu">
			<ul>
				<li><a href="#home">Home</a></li>
				<li><a href="#about">About</a></li>
				<li><a href="#services">Services</a></li>
				<li><a href="#portfolio">Portfolio</a></li>
				<li><a href="#news">News</a></li>
				<li><a href="#contact">Contact</a></li>
			</ul>
		</nav>
		<!-- Sidebar Footer -->
		<div class="addo-footer">
			<ul>
				<li><a href="#"><i class="ti-facebook font-14px white-icon"></i></a></li>
				<li><a href="#"><i class="ti-twitter-alt font-14px white-icon"></i></a></li>
				<li><a href="#"><i class="ti-instagram font-14px white-icon"></i></a></li>
				<li><a href="#"><i class="ti-linkedin font-14px white-icon"></i></a></li>
			</ul>
			<p><small>© 2019 ADDO by <a href="#">DuruThemes</a></small></p>
		</div>
	</aside>
	<!-- Main Section -->
	<div id="addo-main">
		<!-- Home Section -->
		<div id="home" class="section">
			<div class="addo-hero js-fullheight" style="height: 888px;">
				<!-- Slider -->
				<div class="flexslider js-fullheight" style="height: 888px;">
					<ul class="slides">
						<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
						   <div class="overlay-video">
								<video autoplay="" loop="" muted="">
									<source src="images/background.mp4" type="video/mp4">
								</video>
							</div>
							<div class="overlay-color"></div>
							<div class="container-fluid">
								<div class="row">
									<div class="col-md-12 js-fullheight slider-text animated fadeInUp" style="height: 888px;">
										<div class="slider-text-inner">
											<div class="desc">
												<div class="image_wrap"> <img src="images/adam.jpg" alt="" draggable="false"> </div>
												<h1>王也</h1>
												<h2 class="cd-headline clip">
													<span>我</span>
													<span class="cd-words-wrapper" style="width: 68.6792px; overflow: hidden;">
													  <b class="is-visible">&nbsp;是一个穷道士</b>
													  <b class="is-hidden">&nbsp;来自武当</b>
													  <b class="is-hidden">&nbsp;掌握风后奇门</b>
													</span>
												</h2>
											</div>
											<div class="arrow bounce">
												<a href="#about" data-scroll-nav="1" class="scroll">
													<i class="ti-angle-double-down"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
					</ul>
				<ol class="flex-control-nav flex-control-paging"></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li><li class="flex-nav-next"><a class="flex-next flex-disabled" href="#" tabindex="-1">Next</a></li></ul></div>
			</div>
		</div>
		<!-- About Section -->
		<div id="about" class="section">
			<div class="addo-about">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12"> <span class="heading-meta">Information</span>
							<h2 class="addo-heading animate-box" data-animate-effect="fadeInLeft">About Me</h2> </div>
					</div>
					<div class="row">
						<div class="col-md-5"> <img src="images/about.jpg" class="img-fluid mb-30 animate-box" data-animate-effect="fadeInLeft" alt=""> </div>
						<div class="col-md-7 animate-box" data-animate-effect="fadeInLeft"> <span class="heading-meta">ABOUT ME</span>
							<h2 class="cd-headline clip">
								<span>I'm Adam Dornan &amp; </span>
								<span class="cd-words-wrapper" style="width: 54.7877px; overflow: hidden;">
									<b class="is-visible">Web Developer</b>
									<b class="is-hidden">Freelancer</b>
									<b class="is-hidden">Web Designer</b>
								</span>
							</h2>
							<p>Hi, My name is Adam Dornan. I am a Web Developer, and asellus tempus porttitor estnecer intiorer. Nulla facilisi. Nulla cursus velit et faucibus lobortis. In tincider diam metus tincede mollis aryi egestas quis. Nunc vitae felis lectus. Pellentesque imperdiet augue erat aliquer interdume turpis congue. Aliquam euismod turpis.</p>
							<div class="addo-about-contact-wrap">
								<div class="row">
									<div class="col-md-6">
										<p><b>Birthday:</b> 15 April 1990</p>
										<p><b>Website:</b> www.dornan.com</p>
										<p><b>Phone:</b> +1 650-444-0000</p>
									</div>
									<div class="col-md-6">
										<p><b>Degree:</b> Master</p>
										<p><b>Mail:</b> addo@dornan.com</p>
										<p><b>Linkedin:</b> /adamdornan</p>
									</div>
								</div>
							</div>
							<ul class="toolbar">
							  <li><button class="btn">HIRE ME</button></li>
							  <li><button class="btn">DOWNLOAD CV</button></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Skills Section -->
		<div id="skills" class="section">
			<div class="addo-skills">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12"> <span class="heading-meta">Abilities</span>
							<h2 class="addo-heading animate-box" data-animate-effect="fadeInLeft">My Skills</h2> </div>
					</div>
					<div class="row">
						<div class="col-md-6 animate-box" data-animate-effect="fadeInLeft">
							<p>Suspendisse sit amet metus porta, egestas magna eget, ultricies enim. In libero justoner rhoncus eu nisl sed, pharetra luctus lorem. Praesent faucibus nibh nula necfermentum nunc rhoncus proin maximuster.</p>
							<p> Quisque et nulla justo. Class aptent taciti sociosqu ad litora torquent per cobia nostra, per inceptos himenaeos. Mauris pulvinar faucibus dolory. Aenean dolry andapibus id lacinia a, posuere nec libero. Class aptent taciti sociosqu ad litora torquent per cobia nostra, per inceptos himenaeos.</p>
						</div>
						<div class="col-md-6 animate-box" data-animate-effect="fadeInLeft">
							<p class="bar-title">Developer<span class="percent align-right">90%</span></p>
							<div class="bar">
								<div class="bar-fill bar-fill-developer start"></div>
							</div>
							<p class="bar-title">Photoshop<span class="percent align-right">80%</span></p>
							<div class="bar">
								<div class="bar-fill bar-fill-photoshop start"></div>
							</div>
							<p class="bar-title">Web Design<span class="percent align-right">95%</span></p>
							<div class="bar">
								<div class="bar-fill bar-fill-webdesign start"></div>
							</div>
							<p class="bar-title">Social Media<span class="percent align-right">85%</span></p>
							<div class="bar">
								<div class="bar-fill bar-fill-socialmedia start"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Services Section -->
		<div id="services" class="section">
			<div class="addo-services">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12"> <span class="heading-meta">What I Do</span>
							<h2 class="addo-heading animate-box" data-animate-effect="fadeInLeft">Services</h2> </div>
					</div>
					<div class="row">
						<div class="col-md-4">
							<div class="addo-feature animate-box" data-animate-effect="fadeInLeft">
								<div class="addo-icon"> <span class="et-laptop font-35px"></span> </div>
								<div class="addo-text">
									<h3>Web Desing</h3>
									<p>Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.</p>
								</div>
							</div>
							<div class="addo-feature animate-box" data-animate-effect="fadeInLeft">
								<div class="addo-icon"> <span class="et-presentation font-35px"></span> </div>
								<div class="addo-text">
									<h3>Marketing</h3>
									<p>Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.</p>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="addo-feature animate-box" data-animate-effect="fadeInLeft">
								<div class="addo-icon"> <span class="et-lightbulb font-35px"></span> </div>
								<div class="addo-text">
									<h3>Development</h3>
									<p>Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.</p>
								</div>
							</div>
							<div class="addo-feature animate-box" data-animate-effect="fadeInLeft">
								<div class="addo-icon"> <span class="et-mobile font-35px"></span> </div>
								<div class="addo-text">
									<h3>Fully Responsive</h3>
									<p>Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.</p>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="addo-feature animate-box" data-animate-effect="fadeInLeft">
								<div class="addo-icon"> <span class="et-camera font-35px"></span> </div>
								<div class="addo-text">
									<h3>Photography</h3>
									<p>Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.</p>
								</div>
							</div>
							<div class="addo-feature animate-box" data-animate-effect="fadeInLeft">
								<div class="addo-icon"> <span class="et-layers font-35px"></span> </div>
								<div class="addo-text">
									<h3>Art Direction</h3>
									<p>Fusce suscipit, ante a hendrerit thelery ullamcorper, risus nisl cursus purus the viverra ante nulla vel justo.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- References Section -->
		<div id="references" class="section">
			<div class="addo-references">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12"> <span class="heading-meta">My Reference</span>
							<h2 class="addo-heading animate-box" data-animate-effect="fadeInLeft">References</h2> </div>
					</div>
					<div class="row">
						<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
							<div class="team"> <img src="images/01.jpg" class="img-fluid" alt="">
								<div class="desc">
									<div class="con">
										<h3>Jason Lee</h3> <span>AMM Company | CEO</span> </div>
								</div>
							</div>
						</div>
						<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
							<div class="team"> <img src="images/02.jpg" class="img-fluid" alt="">
								<div class="desc">
									<div class="con">
										<h3>Emily Sorey</h3> <span>RESOLVE |&nbsp;General Manager</span> </div>
								</div>
							</div>
						</div>
						<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
							<div class="team"> <img src="images/03.jpg" class="img-fluid" alt="">
								<div class="desc">
									<div class="con">
										<h3>Robert Luca</h3> <span>AKB | Software Team Lead</span> </div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Portfolio Section -->
		<div id="portfolio" class="section">
			<div class="addo-projects">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12"> <span class="heading-meta">Portfolio</span>
							<h2 class="addo-heading animate-box" data-animate-effect="fadeInLeft">Creative Works</h2> </div>
					</div>
					<div class="row">
						<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
							<a href="#" class="desc">
								<div class="project"> <img src="images/01(1).jpg" class="img-fluid" alt="">
									<div class="desc">
										<div class="con">
											<h3>Mockup</h3> <span>Branding Desing</span> </div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
							<a href="#" class="desc">
								<div class="project"> <img src="images/02(1).jpg" class="img-fluid" alt="">
									<div class="desc">
										<div class="con">
											<h3>Book</h3> <span>Graphic Design</span> </div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
							<a href="#" class="desc">
								<div class="project"> <img src="images/03(1).jpg" class="img-fluid" alt="">
									<div class="desc">
										<div class="con">
											<h3>Clock</h3> <span>Graphic Design</span> </div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
							<a href="#" class="desc">
								<div class="project"> <img src="images/04.jpg" class="img-fluid" alt="">
									<div class="desc">
										<div class="con">
											<h3>Logo</h3> <span>Branding Design</span> </div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
							<a href="#" class="desc">
								<div class="project"> <img src="images/05.jpg" class="img-fluid" alt="">
									<div class="desc">
										<div class="con">
											<h3>Kinfolk</h3> <span>Adobe InDesign</span> </div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
							<a href="#" class="desc">
								<div class="project"> <img src="images/08.jpg" class="img-fluid" alt="">
									<div class="desc">
										<div class="con">
											<h3>Eight</h3> <span>Adobe Illustration</span> </div>
									</div>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- News Section -->
		<div id="news" class="section">
			<div class="addo-blog">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12"> <span class="heading-meta">Read</span>
							<h2 class="addo-heading animate-box" data-animate-effect="fadeInLeft">LATEST NEWS</h2> </div>
					</div>
					<div class="row">
						<div class="col-md-4 col-sm-4">
							<div class="blog-entry animate-box" data-animate-effect="fadeInLeft">
								<a href="#" class="blog-img"><img src="images/blog-05.jpg" class="img-fluid" alt=""></a>
								<div class="desc"> <span>in <b><a href="#">LIFESTYLE</a></b></span>
									<h3><a href="#">Responsive Desing</a></h3>
									<p>Fusce suscipit, ante a hendrerit ullamcorper, risus nisl cursus purus, sit amet viverra ante nulla vel justo. Morbi justo erat, posuere vel libero non, bibendum convallis enim.</p>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-sm-4">
							<div class="blog-entry animate-box" data-animate-effect="fadeInLeft">
								<a href="#" class="blog-img"><img src="images/blog-06.jpg" class="img-fluid" alt=""></a>
								<div class="desc"> <span>in <b><a href="#">TRAVEL</a></b></span>
									<h3><a href="#">Bootstrap Framework</a></h3>
									<p>Fusce suscipit, ante a hendrerit ullamcorper, risus nisl cursus purus, sit amet viverra ante nulla vel justo. Morbi justo erat, posuere vel libero non, bibendum convallis enim.</p>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-sm-4">
							<div class="blog-entry animate-box" data-animate-effect="fadeInLeft">
								<a href="#" class="blog-img"><img src="images/blog-02.jpg" class="img-fluid" alt=""></a>
								<div class="desc"> <span>in <b><a href="#">LIFESTYLE</a></b></span>
									<h3><a href="#">Animation Effects</a></h3>
									<p>Fusce suscipit, ante a hendrerit ullamcorper, risus nisl cursus purus, sit amet viverra ante nulla vel justo. Morbi justo erat, posuere vel libero non, bibendum convallis enim.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Contact Section -->
		<div id="contact" class="section">
			<div class="addo-contact">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12"> <span class="heading-meta">Location</span>
							<h2 class="addo-heading animate-box" data-animate-effect="fadeInLeft">Contact Me</h2> </div>
					</div>
					<div class="row">
						<!-- Contact Info -->
						<div class="col-md-6 mb-30 animate-box" data-animate-effect="fadeInLeft">
							<p><b>ADDO COMPANY INC.</b>
								<br>Vivamus nec magna rhoncus felis faucibus printy.
								<br>Faucibus printy nec magna rhoncus printy.</p>
							<p>PHONE: +1 650-444-0000</p>
							<p>FAX: +1 650-444-1234</p>
							<p>EMAIL: info@addoinc.com</p>
							<p>ADDRESS: 2 Curiosity Way, San Mateo, CA 94403, US.</p>
						</div>
						<!-- Contact Form -->
						<div class="col-md-6 animate-box" data-animate-effect="fadeInLeft">
							<p><b>GET IN TOUCH</b></p>
							<form method="post" class="row">
								<div class="col-sm-6">
									<div class="form-group">
										<input type="text" class="form-control" placeholder="Name" required=""> </div>
								</div>
								<div class="col-sm-6">
									<div class="form-group">
										<input type="text" class="form-control" placeholder="Email"> </div>
								</div>
								<div class="col-sm-12">
									<div class="form-group">
										<textarea name="message" id="message" cols="30" rows="5" class="form-control" placeholder="Message"></textarea>
									</div>
								</div>
								<div class="col-sm-12">
									<div class="form-group">
										<button class="btn" type="submit">Say Hello!</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Footer -->
		<div id="addo-footer2" class="section">
			<div class="addo-narrow-content">
				<div class="row">
					<div class="col-md-4 animate-box fadeInLeft animated" data-animate-effect="fadeInLeft">
						<p class="addo-lead">Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
					</div>
					<div class="col-md-4 animate-box fadeInLeft animated" data-animate-effect="fadeInLeft">
						<h2 class="text-center">ADDO<br><span>ADAM DORNAN</span></h2> </div>
					<div class="col-md-4 animate-box fadeInLeft animated" data-animate-effect="fadeInLeft">
						<ul class="social-network">
							<li><a href="#"><i class="ti-facebook font-14px black-icon"></i></a></li>
							<li><a href="#"><i class="ti-twitter-alt font-14px black-icon"></i></a></li>
							<li><a href="#"><i class="ti-instagram font-14px black-icon"></i></a></li>
							<li><a href="#"><i class="ti-linkedin font-14px black-icon"></i></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Js -->
<script src="js/jquery.min.js"></script>
<script src="js/modernizr-2.6.2.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/animated.headline.js"></script>
<script src="js/sticky-kit.min.js"></script>
<script src="js/main.js"></script>

</body>
</html>